<template>
    <div class="majorModule">
        <a-input-group compact>
            <a-select 
                style="width:200px"
                :notFoundContent="'暂无数据'"
                placeholder="专业方向"
                allowClear
                :value="selectMajor"
                @change="handleMajor">
                <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{item.name}}</a-select-option>
            </a-select>
            <a-select 
                style="width:200px"
                :notFoundContent="'暂无数据'"
                allowClear
                :value="selectModule"
                placeholder="模块选择"
                @change="handleModule">
                <a-select-option v-for="(item,index) in moduleList" :key="index" :value="item.id">{{item.name}}</a-select-option>
            </a-select>
            <a-select 
                style="width:200px"
                :notFoundContent="'暂无数据'"
                allowClear
                :value="selectCourse"
                placeholder="课程选择"
                @change="handleCourse">
                <a-select-option v-for="(item,index) in courseList" :key="index" :value="item.id">{{item.title}}</a-select-option>
            </a-select>
            <a-input-search
                class="searchBox"
                placeholder="请输入关键字"
                style="width: 300px"
                @search="onSearch"
                enterButton
                v-model="searchValue"
                />
        </a-input-group>
    </div>
</template>
<script>
import {getMajorListApi,getCommonCourseListApi} from "@/request/api"
export default {
    name:"majorModuleCourse",
    created(){
        this.init()
    },
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        },
        selectMajor:function(val){
            this.selectModule=undefined
            this.selectCourse=undefined
            if(val){
                this.searchInfo.majorId=val
                this.moduleList=this.list.filter(value=>value.id==val)[0].children
                this.submit()
            }else{
                this.moduleList=[]
                this.courseList=[]
                this.searchInfo.majorId=''
                this.searchInfo.moduleId=''
                this.searchInfo.courseId=''
                this.submit()
            }
        }
    },
    data(){
        return{
            list:[],
            moduleList:[],
            major:'',
            searchInfo:{
                majorId:'',
                moduleId:'',
                keyword:'',
                courseId:''
            },
            searchValue:'',
            selectMajor:undefined,
            selectModule:undefined,
            selectCourse:undefined,
            courseList:[]
        }
    },
    methods:{
        init(){
            this.getToken(getMajorListApi,{},res=>{
                this.list=res.data
            })
        },
        handleMajor(item){
            this.selectMajor=item
        },
        handleModule(data){
            if(data){
                this.searchInfo.moduleId=data
                this.selectModule=data
                this.getToken(getCommonCourseListApi,{'majorId':data},res=>{
                    this.courseList=res.data
                })
            }else{
                this.selectCourse=undefined
                this.selectModule=undefined
                this.searchInfo.courseId=''
                this.courseList=[]
            }
            this.submit()
        },
        handleCourse(data){
            this.searchInfo.courseId=data
            this.selectCourse=data
            this.submit()
        },
        onSearch(data){
            this.searchInfo.keyword=data
            this.submit()
        },
        submit(){
            this.$emit('submitSearch',this.searchInfo)
        }
    }

}
</script>
<style>
.majorModule .ant-input-group.ant-input-group-compact .ant-input{
    border-radius: 0;
}
</style>